<template>
  <div id="app">
      <el-card shadow="always">
        {{userSearch}}
        <el-form :inline="true" size="medium" :model="userSearch" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="userSearch.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="userSearch.sex" placeholder="性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" plain @click="editUser" icon="el-icon-plus">添加用户</el-button>
          </el-form-item>
        </el-form>
        <el-table
            :data="userList"
            style="width: 100%">
          <el-table-column
              label="姓名"
              prop="name"
              align="center">
          </el-table-column>
          <el-table-column
              label="年龄"
              prop="age"
              align="center">
          </el-table-column>
          <el-table-column
              label="性别"
              prop="sex"
              align="center">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <span class="demonstration">完整功能</span>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-card>

  </div>
</template>
<script>
import userApi from "@/api/user"

export default {
  data() {
    return {
      userList: [],
      page: 1,
      pageSize:10,
      total:100,
      userSearch:{},//查询条件对象
      dialogFormVisible:false,  // 控制对话框的显示隐藏
      formLabelWidth:'100px',   // 对话框提示文本的宽度
      user: {},              // 学生对象（添加或修改）
      title: '添加用户',          // 对话框标题
    }
  },
  created: function () {
    this.search()
  },
  methods: {
    //1.查询所有用户
    async findUsers(){
      const {data:res} = await userApi.findAll()
      this.userList =res.data.users;
    },
    async findByPage(page, pageSize) {
      const {data:res} = await userApi.findByPage(page,pageSize)
      if (res.code === 200){
        this.userList =res.data.users.rows;
        this.total = res.data.users.total;
      }
    },
  async search(){
    const {data:res} = await userApi.search(this.page,this.pageSize,this.userSearch)
    this.userList = res.data.users.rows
    this.total = res.data.users.total
  },
  editUser(){
    this.dialogFormVisible = true;
  },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      this.pageSize = val
      // this.findByPage()
      this.search()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val
      // this.findByPage()
      this.search()
      console.log(`当前页: ${val}`);
    }
  }
}

</script>
<style>
.el-card {
  width: 90%;
  margin: auto;
}
#app{display: flex;
  justify-content: center;
}
.el-pagination{
  text-align: right;
  margin-top: 15px;
}
</style>